<template>
  <div class="automation-nav mb-4">
    <el-card>
      <div class="nav-content">
        <div class="nav-title">
          <el-icon><Setting /></el-icon>
          <span>自动化管理</span>
        </div>
        <div class="nav-buttons">
          <el-button
            :type="currentRoute === '/automation/files' ? 'primary' : 'default'"
            @click="navigateTo('/automation/files')"
          >
            <el-icon><Folder /></el-icon>
            服务器文件管理
          </el-button>
          <el-button
            :type="currentRoute === '/automation/configs' ? 'primary' : 'default'"
            @click="navigateTo('/automation/configs')"
          >
            <el-icon><Tools /></el-icon>
            导入配置管理
          </el-button>
          <el-button
            :type="currentRoute === '/automation/import' ? 'primary' : 'default'"
            @click="navigateTo('/automation/import')"
          >
            <el-icon><Upload /></el-icon>
            手动导入比分
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Setting, Folder, Tools, Upload } from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();

// 当前路由路径
const currentRoute = computed(() => route.path);

// 导航到指定路由
const navigateTo = (path: string) => {
  if (currentRoute.value !== path) {
    router.push(path);
  }
};
</script>

<style scoped>
.automation-nav {
  margin-bottom: 16px;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.nav-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.nav-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .nav-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .nav-buttons {
    width: 100%;
    justify-content: flex-start;
  }
}
</style>